/*
 *
 * @ProjectName:    my_umi_app
 * @Package:
 * @ClassName:      message_input_widget
 * @Description:    留言框
 * @Author:         SuPeiSen
 * @CreateDate:     2021/3/4 5:53 下午
 * @UpdateDate:     2021/3/4 5:53 下午
 * @UpdateRemark:   更新说明：
 * @Version:        1.0
 */

// 留言框样式
import { Button, Input, message, Radio } from 'antd';
import React, { useRef, useState } from 'react';
import { useViewport } from '@/provider/viewport_context';
import { RegexpEnum, regexpFun } from '@/utils/regexp_fun';
import { BlogSentMessageApi } from '@/service/blog/blog_message_api';
import { Editor } from '@tinymce/tinymce-react';
import { AppConfig } from '@/config/app_config';
import { initCodeLanguage } from '@/pages/admin/article/add_article';

// 留言区域点击事件定义
type MessageInputOnClick = (
  userName: string,
  userEmail: string,
  content: string,
  userSex: number,
) => void;

/**
 * 留言框封装
 * @param props
 * @constructor
 */
export const MessageInputWidget = (props: {
  onClickBtn: MessageInputOnClick;
}) => {
  const { type } = useViewport();

  // 保存输入框内容
  const userNameRef = useRef<{ value: string }>({ value: '' });
  const userEmailRef = useRef<{ value: string }>({ value: '' });
  const userContentRef = useRef<{ value: string }>({ value: '' });
  // 保存性别单选框
  const [sex, setSex] = useState<number>(0);

  // 提交留言
  const submitMessage = () => {
    const name = userNameRef.current.value;
    const email = userEmailRef.current.value;
    const messageContent = userContentRef.current.value;
    if (!regexpFun(RegexpEnum.email, email)) {
      message.warn('邮箱校验不通过');
      return false;
    }
    props.onClickBtn(name, email, messageContent, sex);
  };

  // 富文本输入框
  const editorInput = () => {
    return (
      <Editor
        apiKey={AppConfig.TinyEditKey}
        cloudChannel="5-stable"
        disabled={false}
        id="blog.hellosu.top/admin"
        onEditorChange={(value) => {
          userContentRef.current.value = value;
        }}
        init={{
          language: 'zh_CN',
          height: '200px',
          min_height: 200,
          automatic_uploads: true,
          codesample_languages: initCodeLanguage,
          menubar: 'my1',
          plugins: 'codesample',
          toolbar: false,
          menu: {
            my1: { title: '我的菜单', items: 'codesample' },
          },
        }}
      />
    );
  };

  const messageInput = () => {
    switch (type) {
      case 'phone':
        return (
          <div className="phone_article_content_input">
            <Input
              placeholder="昵称"
              onChange={(event) => {
                userNameRef.current.value = event.target.value;
              }}
              className="article_content_user_input_child"
            />
            <Input
              onChange={(event) => {
                userEmailRef.current.value = event.target.value;
              }}
              placeholder="邮箱"
              className="article_content_user_input_child"
            />
            {editorInput()}
            <div className="phone_article_content_input_radio">
              <Radio.Group
                onChange={(value) => {
                  setSex(value.target.value);
                }}
                value={sex}
              >
                <Radio value={0}>男的</Radio>
                <Radio value={1} style={{ color: '#ea89a7' }}>
                  可爱美丽小仙女
                </Radio>
              </Radio.Group>
            </div>
            <Button onClick={submitMessage}>提交</Button>
          </div>
        );
      case 'pc':
        return (
          <div>
            <div className="article_content_user_input">
              <Input
                placeholder="昵称"
                onChange={(event) => {
                  userNameRef.current.value = event.target.value;
                }}
                className="article_content_user_input_child"
              />
              <Input
                onChange={(event) => {
                  userEmailRef.current.value = event.target.value;
                }}
                placeholder="邮箱"
                className="article_content_user_input_child"
              />

              <div className="article_content_button_div">
                <Button
                  className="article_content_submit_button"
                  onClick={submitMessage}
                >
                  提交
                </Button>
              </div>
              <div className="article_content_radio">
                <Radio.Group
                  onChange={(value) => {
                    setSex(value.target.value);
                  }}
                  value={sex}
                >
                  <Radio value={0}>男的</Radio>
                  <Radio value={1} style={{ color: '#ea89a7' }}>
                    可爱美丽小仙女
                  </Radio>
                </Radio.Group>
              </div>
            </div>
            {editorInput()}
          </div>
        );
    }
  };

  return messageInput();
};
